<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>智链速拼-注册</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/js/tabler.min.js"></script>
    <script type="text/javascript" src="res/jquery/jquery-1.11.1-min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/css/tabler.min.css">


    <script type="text/javascript">
        $(function (){
            /**
             * 进行注册信息数据校验 判断数据是否规范
             */
            $("#registerNum").blur(function (){
                var phoneReg = new RegExp(/0?(13|14|15|18|17)[0-9]{9}/);
                if(!phoneReg.test($.trim($("#registerNum").val()))){
                    $("#phoneMsg").html('请输入有效手机号');
                }else{
                    $("#phoneMsg").html('');
                }
            })
            $("#registerEmail").blur(function (){
                var emailReg = new RegExp(/\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/);
                if(!emailReg.test($.trim($("#registerEmail").val()))){
                    $("#emailMsg").html('请输入有效的邮箱');
                }else{
                    $("#emailMsg").html('');
                }
            })

            $("#company").blur(function (){
                if($.trim($("#company").val()) == null || $.trim($("#company").val()) === ''){
                    $("#companyMsg").html('所属公司不能为空');
                }else{
                    $("#companyMsg").html('');
                }
            })
            $("#registerPwd").blur(function (){
                if($.trim($("#registerPwd").val()) == null || $.trim($("#registerPwd").val()) === ''){
                    $("#pwdMsg").html('密码不能为空');
                }else{
                    $("#pwdMsg").html('');
                }
            })
            $("#registerUserName").blur(function (){
                if($.trim($("#registerUserName").val()) == null || $.trim($("#registerUserName").val()) === ''){
                    $("#usernameMsg").html('用户名不能为空');
                }else{
                    $("#usernameMsg").html('');
                }
            })


            /**
             * 点击注册
             */
            $("#registerBtn").click(function (){
                var number = $.trim($("#registerNum").val());
                var password = $.trim($("#registerPwd").val());
                var username = $.trim($("#registerUserName").val());
                var email = $.trim($("#registerEmail").val());
                var userType = $.trim($("#registerUserType").val());
                var company = $.trim($("#company").val());

                //判断数据是否为空
                if((email == null || email === '') ||
                    (password == null || password === '') ||
                    (username == null || username === '')){
                    alert("请提交规范的数据！")
                    return;
                }else if($("#phoneMsg").html() != '' ||
                         $("#emailMsg").html() != '' ||
                         $("#pwdMsg").html() != '' ||
                         $("#companyMsg").html() != '' ||
                         $("#usernameMsg").html() != ''){
                    alert("请根据红字提示完成注册信息填写！")
                    return;
                }else{
                    var user = {number,password,username,email,userType,company};
                    $.ajax({
                        url:'dev/user/register',
                        contentType: "application/json;charset=UTF-8",
                        data: JSON.stringify(user),
                        type:'post',
                        dataType:'json',
                        success: data =>{
                            if(data.data == null){
                                alert("注册成功！")
                            }else{
                                alert(data.data)
                            }
                            window.location.href='toLogin'
                        }
                    })
                }
            })
        })
    </script>


</head>
<body  class=" d-flex flex-column">
<div class="page page-center">
    <div class="container container-tight py-4">
        <div class="text-center mb-4">
            <a href="." class="navbar-brand navbar-brand-autodark"><img src="${pageContext.request.contextPath}/res/images/logo.png" height="70" alt=""></a>
        </div>
        <div class="card card-md">
            <div class="card-body">
                <h2 class="h2 text-center mb-4">创建新账户</h2>
                <form action="./" method="get" autocomplete="off" novalidate>
                    <div class="mb-3">
                        <label class="form-label" >手机号码
                            <span id="phoneMsg" style="color: red"></span>
                        </label>

                        <input id="registerNum" autofocus type="text" class="form-control" placeholder="Enter phone" autocomplete="off">
                    </div>
                    <div class="mb-2">
                        <label class="form-label">电子邮箱
                            <span id="emailMsg" style="color: red"></span>
                        </label>
                        <input id="registerEmail"  type="text" class="form-control" placeholder="Enter email" autocomplete="off" >
                    </div>
                    <div class="mb-2">
                        <label class="form-label">所属公司
                            <span id="companyMsg" style="color: red"></span>
                        </label>
                        <input id="company"  type="text" class="form-control" placeholder="Enter company" autocomplete="off" >
                    </div>
                    <div class="mb-2">
                        <label class="form-label">密码
                            <span id="pwdMsg" style="color: red"></span>
                        </label>
                        <input id="registerPwd" type="password" class="form-control" placeholder="Enter password" autocomplete="off">
                    </div>
                    <div class="mb-2">
                        <label  class="form-label">用户名
                            <span id="usernameMsg" style="color: red"></span>
                        </label>
                        <input id="registerUserName" type="text" class="form-control" placeholder="Enter name" autocomplete="off">
                    </div>
                    <div class="mb-3">
                        <label  class="form-label">用户类型</label>
                        <select id="registerUserType" type="text" class="form-select" placeholder="Select a date" id="select-tags-advanced" value="">
                            <option value="1">托运方</option>
                            <option value="2">承运方</option>
                        </select>
                    </div>
                    <div class="form-footer">
                        <button id="registerBtn" type="button" class="btn btn-primary w-100">注册</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="text-center text-muted mt-3">
            已有账户？ <a href="toLogin" tabindex="-1">登录</a>
        </div>
    </div>
</div>
</body>
</html>
